<!DOCTYPE html>
<html  lang="zh">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <style>
            html{
                background-image: linear-gradient(180deg, #020718, #082164);
                width:100%;
                height:100%;
            }
            body{
                overflow:hidden;
                color:white;
                user-select: none;
            }
            .fix{
                text-shadow: 0 0 20px cyan;
                position: fixed;
            }
            .centerX{
                left:50%;
                transform:translate(-50%,0);
            }
            #time{
                font-size:14pt;
            }
            #countdown{
                font-size:24pt;
                top:20%;
            }
            #lkactivity-title{
                font-size:64pt;
                text-align: center;
                top:50%;
                width:100%;
                transform:translate(-50%,-50%);
                background-color: transparent;
                color:white;
                outline:none;
                border:none;
                overflow:auto;
            }
            .tick{
                background-color:white;
                box-shadow: 0 0 10px cyan;
                display:block;
                position: fixed;
                width: 15px;
                height:15px;
                border-radius: 8px;
            }
            .hidetick{
                background-color: transparent;
            }
            .btn{
                width:50px;
                height:50px;
                box-shadow: 0 0 10px cyan;
                border-radius: 25px;
                font-size:16pt;
                text-align: center;
                line-height: 50px;
                color:aquamarine;
                display:inline-block;
                margin:0 20px;
            }
            .btn i:hover{
                transform:scale(1.5);
                cursor: pointer;
            }
            #btns{
                bottom:6%;
                left:50%;
                transform:translate(-50%,0);
                text-align: center;
            }
            .last10{
                color:red;
                text-shadow: 0 0 30px red;
            }
            .card-container{
                display:flex;
                flex-wrap: wrap;
            }
            .card{
                width:10%;
                margin:1%;
                background-color:rgba(0,0,0,0.5);
                border:1px solid rgba(255,255,255,0.5);
                height:80px;
                border-radius: 10px;
                cursor: pointer;
                text-align: center;
                line-height: 80px;
                font-size:32pt;
            }
            .card:hover{
                background-color:rgba(255,255,255,0.5);
            }
            #refresh{
                bottom:6%;
                right:10px;
            }
            #option{
                bottom:6%;
                right:30px;
                font-size:22pt;
                padding:10px;
                border:1px solid rgba(255,255,255,0.3);
                border-radius: 15px;
                cursor: pointer;
                width:350px;
            }
            .small{
                font-size:12pt;
            }
            .history{
                padding:3px;
            }
            .history:hover{
                background-color:rgba(255,255,255,0.3);
            }
            .selected{
                background-image: linear-gradient(90deg,  transparent 30%, rgba(255, 255, 255, 0.3));
            }
            [v-cloak] {
                display:none;
            }
            #history-container::-webkit-scrollbar{
                display: none;
            }
        </style>
        <script src="./assets/vue.min.js"></script>
        <script src="./assets/util.js"></script>
        <link rel="stylesheet" href="./assets/fontawesome/css/font-awesome.min.css">
    </head>
    <body>
        <div id="vueapp" v-cloak>
            <span id="time" class="fix" style="right:100px;">{{time | dateFormat}}</span>
            <div id="allTitle" style="font-size:24pt;text-align: center;" class="fix centerX">浙江大学-临矿集团青年领军人才素能提升培训班（五期）
                <br> 
                <span style="font-size:28pt;">一分钟演讲</span>
            </div>
            <span id="countdown" class="fix centerX" :style="{'font-size':24+round2(48*(allCountDown-countdown)/allCountDown)+'pt'}" :class="{last10:countdown<10}">{{countdown | round2}}</span>
            <div id="lkactivity-title" class="fix centerX" :style="{'color':countdown<=0?'transparent':null,'width':centerY+'px'}">{{title}}</div>
            <div>
                <span class="tick" v-for="i in allCountDown" :class="{'hidetick':i>countdown}" :style="{left:computeX(i)+'px',top:computeY(i)+'px'}"></span>
            </div>
            <div id="btns" class="fix">
                <div class="btn">
                    <i class="fa fa-fw" :class="{'fa-play':status==0,'fa-pause':status==1}" @click="playOrPause"></i>
                </div>
                <div class="btn">
                    <i class="fa fa-fw fa-stop" @click="stop" @dblclick="countdown=0"></i>
                </div>
            </div>
            <div class="fix" id="option" v-if="!first" @click="refresh(true)" :class="{'selected':!refreshing}">
                <div class="small">下一位:</div>
                {{option}}
            </div>
            <div class="btn fix" id="refresh" v-if="first">
                <i class="fa fa-fw fa-refresh" @click="refresh(false)"></i>
            </div>
            <div class="fix" v-if="history.length>0">
                <div style="border-bottom:1px solid white">历史词汇</div>
                <div id="history-container" :style="{'max-height':centerY*2-55+'px'}" style="overflow: auto;">
                    <div class="history" v-for="h,i in history" @dblclick="historyClick(h,i)">{{i+1}}. {{h}}</div>
                </div>
            </div> 
            <div class="btn fix" style="right:0">
                <i class="fa fa-fw fa-trash-o" @click="clearAll"></i>
            </div>
        </div>
        <script>
            var list=["同事关系","游戏","亚健康","周杰伦","中国梦与美国梦","青春","《史记》","国学","社会主义核心价值观","孔子",
            "特朗普","手机","品味幸福","担当","狂笑","道","企业生存","乌鸦","人才","工作激情","疫情","咖啡","风险","成长","古诗",
            "党建","文化自信","破釜沉舟","智能化","京东","求是","临矿品牌","浙大培训","敬业","发展","传统文化","创新","品牌","孩子",
            "台湾","世界500强","形式主义","爱情","区块链","5G","中美关系","时间","五大平台","充电宝","新山能","斗地主",
            "岔路口","沂蒙精神","鲍鑫佳","口吃","时代楷模","西湖","煤亮子","淘宝","大数据","酒","高铁","绿水青山","气节"];
            var tickAudio=new Audio("./assets/tick.mp3");
            var tickAudioPlaying=false;
            function tickPlay(flag){
                if(flag){
                    if(tickAudioPlaying) return;
                    tickAudioPlaying=true;
                    tickAudio.play();
                }else{
                    tickAudio.load();
                    tickAudioPlaying=false;
                }
            }
            var stopAudio=new Audio("./assets/stop.wav");
            function stopPlay(){
                stopAudio.load();
                stopAudio.play();
                setTimeout(function(){
                    stopAudio.load();
                },2500);
            }
            var maxTime=60;
            var vueapp=new Vue({
                el:"#vueapp",
                data:{
                    time:new Date(),
                    startTime:new Date(),
                    countdown:maxTime,
                    allCountDown:maxTime,
                    centerX:Math.round(window.innerWidth/2),
                    centerY:Math.round(window.innerHeight/2),
                    title:"",
                    option:"",
                    first:true,
                    status:0, //0暂停 1开始
                    page:"menu",
                    list:list,
                    history:[],
                    needToHistory:[], //有些尚未进入history的，存入这里，以免刷新时丢失数据
                    refreshing:false,
                },
                methods:{
                    computeX:function(i){
                        return this.centerX + this.centerY*0.7*Math.cos(-Math.PI/2+Math.PI*2*i/this.allCountDown)
                    },
                    computeY:function(i){
                        return this.centerY + this.centerY*0.7*Math.sin(-Math.PI/2+Math.PI*2*i/this.allCountDown)
                    },
                    playOrPause:function(){
                        if(this.status==0){//停止中
                            this.status=1;
                            this.startTime= new Date(+new Date() - (this.allCountDown-this.countdown)*1000);
                        }else if(this.status==1){//开始中需要暂停
                            this.status=0;
                        }
                        tickPlay(false);
                    },
                    stop:function(){
                        this.status=0;
                        this.countdown=this.allCountDown;
                        tickPlay(false);
                    },
                    historyClick:function(h,i){
                        this.history.splice(i,1);
                        this.list.push(h);
                        save();
                    },
                    clearAll:function(){
                        try{
                            window.localStorage.getItem("");
                            localStorage.clear();
                        }catch(e){
                            document.cookie="";
                        }
                        location.reload()
                    },
                    refresh:function(flag){
                        this.first=false;
                        //开始刷新新词汇
                        if(this.refreshing) return;
                        if(flag){
                            if(!vueapp.title || vueapp.countdown==0){
                                if(vueapp.title){
                                    vueapp.history.push(vueapp.title);
                                    var hi=vueapp.needToHistory.findIndex(function(a){
                                        return a==vueapp.title;
                                    });
                                    vueapp.needToHistory.splice(hi,1);
                                    save();
                                }
                                vueapp.title=vueapp.option;
                                var c=document.getElementById("history-container");
                                if(c) c.scrollTop=c.scrollHeight;
                                this.stop();
                            }else{
                                return;
                            }
                        }
                        this.refreshing=true;
                        var dur=10,maxdur=2000,i=0;
                        var runfunc=function(){
                            if(dur<100){dur*=1.02}
                            else if(dur<500){dur*=1.3}
                            else{dur*=2}
                            i=ran(0,vueapp.list.length-1);
                            if(dur>=maxdur){
                                vueapp.option=vueapp.list[i];
                                vueapp.list.splice(i,1);
                                vueapp.refreshing=false;
                                vueapp.needToHistory.push(vueapp.option);
                                save();
                            }else{
                                vueapp.option=vueapp.list[i];
                                setTimeout(runfunc,dur);
                            }
                            
                        }
                        setTimeout(runfunc,dur);
                    }
                },
                filters:{
                    dateFormat:function(val){
                        return formatDate(val);
                    },
                    round2:function(val){
                        return round2(val).toFixed(2);
                    }
                },
                computed:{
                    countdownInt:function(){
                        return Math.ceil(this.countdown);
                    }
                }
            })

            window.onresize=function(){
                Vue.set(vueapp,"centerY",Math.round(window.innerHeight/2));
                Vue.set(vueapp,"centerX",Math.round(window.innerWidth/2));
            }
            var lastIsGt0=true;
            setInterval(function(){
                vueapp.time=new Date();
                if(vueapp.status==1&&vueapp.startTime){
                    if(vueapp.countdown>0 && vueapp.countdown<10){
                        tickPlay(true);
                    }
                    if(vueapp.countdown>0){
                        vueapp.countdown=vueapp.allCountDown-(+new Date()-(+vueapp.startTime))/1000;
                    }
                    if(lastIsGt0&&vueapp.countdown<=0){
                        tickPlay(false);
                        stopPlay();
                        vueapp.countdown=0;
                    }
                    lastIsGt0=vueapp.countdown>0;
                }
            },31);
            function save(){
                var setting={list:vueapp.list,history:vueapp.history,needToHistory:vueapp.needToHistory};
                try{
                    window.localStorage.getItem("");
                    localStorage.setItem("LK_COUNTDOWN_SETTING",JSON.stringify(setting));
                }catch(e){
                    document.cookie=JSON.stringify(setting);
                }
            }
            function load(){
                try{
                    window.localStorage.getItem("");
                    var setting=localStorage.getItem("LK_COUNTDOWN_SETTING");
                }catch(e){
                    setting=document.cookie;
                }
                if(setting){
                        try{
                            setting=JSON.parse(setting);
                            Vue.set(vueapp,"list",setting.list.concat(setting.needToHistory));
                            Vue.set(vueapp,"history",setting.history);
                        }catch(e){
                            console.error(e);
                        }
                    }
            }
            load();
        </script>
    </body>
</html>